<script setup>
import { ref, watch } from 'vue'
const obj = ref({
  name: '张三',
  age: 18
})
// 用ref定义的数据，如果想监听对象内的某个属性需要开启深度监听deep: true
// 在watch监听中 如果obj整个替换掉，新值是新值  老值是老值 ，如果只替换对象中的某个属性新值和老值一样
watch(
  obj,
  () => {
    console.log('obj修改了')
  },
  {
    deep: true
  }
)
const chegename = () => {
  obj.value.name += '~'
}
const chegeage = () => {
  obj.value.age += 1
}
const chegeobj = () => {
  obj.value = {
    name: '张',
    age: 1
  }
}
</script>

<template>
  <div>
    <span>姓名：{{ obj.name }}- 年龄：{{ obj.age }} </span><br />
    <button @click="chegeobj">点击改obj</button>
    <button @click="chegename">点击改name</button>
    <button @click="chegeage">点击改age</button>
  </div>
</template> 

